<template>
  <div>
    <h1>Watch 的运用</h1>
    <hr />
    <h1>情况1： 监视【ref】定义的【基本类型的数据】</h1>
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="changeSum">点我Sum+1</button>
    <hr />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

let sum = ref(0);

//--=====================
function changeSum() {
  sum.value += 1;
}
//==============监视
//监视的方法
//watch("监视谁",回调函数)
//----- 正常监视， 不解除监视
// watch(sum, (newValule, oldValue) => {
//   console.log("sum 变化了", newValule, oldValue);
// });

//--========= 如何解除监视
const stopWatch = watch(sum, (newValule, oldValue) => {
  console.log("sum 变化了", newValule, oldValue);
  if (newValule >= 10) {
    stopWatch();
  }
});
</script>

<style scoped>
</style>